<template>
	<view class="withdrawalamount-container">
		<view class="u-flex u-flex-between u-flex-items-center withdrawal-header">
			<view class="u-flex">
				<u-icon name="weixin-fill" color="#59c021" size="48rpx"></u-icon>
				<view class="header-lable">微信账号</view>
			</view>
			<text class="header-name">{{unref(proxy['vuex_user'].realname)}}</text>
		</view>

		<view class="withdrawal-item">
			<view class="item-title">提现金额</view>
			<view class="item-input m-b-20">
				<u-input v-model="amountValue" type="number" placeholder="请输入提现金额" border="bottom" prefixIcon="rmb"
					prefixIconStyle="font-size: 22px; font-weight: bolder; color: #000" clearable></u-input>
			</view>
			<view class="u-flex u-flex-items-center item-lable m-b-20">
				<text class="item-prompt">账户余额</text>
				<view class="item-money">¥{{userBurse.wfBurseAmount}}</view>
				<view class="item-money-btn" @tap="amountValue=userBurse.wfBurseAmount">全部提现</view>
			</view>
			<text class="item-prompt">提现金额会即时显示在你的零钱余额中。</text>
		</view>
	</view>

	<view class="footer-content">
		<u-button type="primary" shape="circle" color="#FF5151" text="立即提现" @tap="handlePlaceorder"></u-button>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, unref, getCurrentInstance } from "vue";
	import { onLoad } from '@dcloudio/uni-app';
	import { transferAccounts, queryUserBurse } from '@/common/mine.api';

	const { proxy } = getCurrentInstance();
	const userBurse = ref({
		wfBurseAmount: 0,
		wfBurseId: 0
	})

	let amountValue = ref()

	onLoad((option) => {
		userBurse.value.wfBurseId = option.wfBurseId
		userBurse.value.wfBurseAmount = option.wfBurseAmount
	})

	async function handlePlaceorder() {
		if (!unref(amountValue) || Number(unref(amountValue)) < 0.01) {
			uni.showToast({
				icon: 'none',
				title: '最低提现0.01',
				duration: 2000
			});
		} else if (Number(unref(amountValue)) > unref(userBurse).wfBurseAmount) {
			uni.showToast({
				icon: 'none',
				title: '您的可提现余额不足',
				duration: 2000
			});
		} else {
			await transferAccounts({ amount: unref(amountValue) })
			let res = await queryUserBurse()
			userBurse.value.wfBurseAmount = res.wfBurseAmount
		}
	}
</script>

<style lang="scss" scoped>
	.withdrawalamount-container {
		padding-top: 20rpx;
		margin: 0 20rpx;

		.withdrawal-header {
			padding: 20rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.header-lable {
				font-size: 32rpx;
				font-weight: 500;
				color: #333333;
				padding-left: 5rpx;
			}

			.header-name {
				font-size: 22rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.withdrawal-item {
			// height: 100%;
			padding: 20rpx;
			margin-top: 20rpx;
			background: #FFFFFF;
			border-radius: 12rpx;

			.item-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}

			.item-input {
				font-size: 34rpx;
				font-weight: 600;
				color: #999999;
			}

			.item-prompt {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}

			.item-lable {
				font-size: 24rpx;

				.item-money {
					padding: 0 20rpx;
					font-weight: 400;
					color: #666666;
				}

				.item-money-btn {
					font-weight: 500;
					color: #FF5046;
				}
			}
		}
	}
</style>